*{
			margin: 0;
			padding: 0;
}
body{
			background: url(../img/bd.bg.png);
			background-repeat: repeat-x;
			background-position: 0 120px;
			 
		 
}
.header{
			width: 80%;
			height: 110px;
			margin: 7px auto;
	}

.logo {
		  	background: url(../img/篮球鞋AJ-12.png);
		  	background-repeat: no-repeat;
		  	background-size:cover;
		  	width: 12%;
		  	height: 100%;
		  	float: left;
		  
}
.nav{
			list-style: none;
			width: 80%;
			height: 100%;
			/*background: #bfa;*/
			float: left;
			
}
.nav li{
			width: 25%;
			height: 100%;		
			float: left;
			text-align: center;
}
.nav a{
			display: inline-block;
			text-decoration: none;
			/*background-color: red;*/
			 -webkit-background-clip: text;
			background-image: linear-gradient(120deg,red,yellow);
			color: transparent;
			width: 100%;
			height: 100%;
			border-left: 2px solid #000;
			
			
			text-align: center;
			 font: 50px/110px bold ;
			 font-family:"华文彩云";
			
}
.nav a:hover{
			background-image: linear-gradient(120deg,gold,purple);
}
/*set the m1*/
.m1,.m2,
.m3{
			width: 100%;
			height: 80px;
			background-image: linear-gradient(120deg,#333,darkgray,white);
			position: absolute;
			top: 110px;
			z-index: 10;
			margin: 0 auto;
			display: none;
}
.m1 ul,.m2 ul,
.m3 ul{
			width:700px;
			height: 100%;
			margin: 0 auto;
}
.m1 li,.m2 li,
.m3 li{
			height: 100%;
			width:160px;
			
			text-align: center;
			float: left;
			list-style: none;
			/*background:yellowgreen;*/
			
}
.m1 a,.m2 a,
.m3 a{
			display: inline-block;
			width: 100%;
			height: 100%;
			margin: 2px auto;
			font-size: 35px;
			font-family: "华文彩云";
			color: purple;
			text-decoration: none;
			line-height: 80px;
}
/*set the perMes*/
.perMes{
			display: none;			
			width: 250px;
			height: 240px;
			background-image: linear-gradient(130deg,silver,white);
			float: right;
			position:absolute;
			z-index: 10;
			right: 10%;
		   font-style: italic;
}
.perMes img{
			display: block;
}


/*set the icon*/


.icon{
			width: 8%;
			height: 100%;			
			/*background: aliceblue;*/
			float: left;
}
.icon li{
			list-style: none;
}
.icon ul {
			position: relative;
			width: 40px;
			height: 100px;
		  	  
	}
.icon li {
			list-style-type: none;
			position: absolute;
			width: 30px;
			height: 4px;
			background-color: black;
			transform-origin: left;
			transition: 0.6s;
}


.icon li:nth-child(1) {
		  	top: 40%;
}
.icon li:nth-child(2) {
  			top:50%;
}
.icon li:nth-child(3) {
  			top:60%;
}
.icon ul:hover  li:nth-child(1) {
 	 		top: 40%;
   			transform: rotateZ(42deg);
}
.icon ul:hover  li:nth-child(2) {
			top::50%;
			opacity: 0;
}
.icon ul:hover li:nth-child(3) {
			top: 60%;
			transform: rotateZ(-42deg);
}

/*set the imgList*/
.outer{
			position: relative;
			width: 80%;
			height:320px;
			background-image: linear-gradient(goldenrod,gold);
			/*padding: 10px 0;*/
			margin:2% auto;
			border-radius: 20px;
			overflow: hidden;
			/*box-shadow:5px 5px 5px 5px darkgray;*/
		  
		
	}
#imgList{
			position: absolute;
			list-style: none;
			width: 500%;
			height: 100%;
			/*background: #DAA520;*/
			left: 0px;
			
		
	}
#imgList li{
			width:18%;
			height: 100%;
			/*background-image: url(../img/lb6.jpg);
			background-size:contain;*/
			margin: 0 1%;
			float: left;
	}
#imgList img{
			width: 100%;
			height: 100%;
		
}

#navDiv{
			position: absolute;
			bottom: 15px;
			left:395px
	}
#navDiv a{
			float: left;
			border-radius: 15px;
			background-color: gold;
			width: 15px;
			height: 15px;
			margin: 0 5px;
			opacity: 0.5;
			
	}
#navDiv a:hover{
			background-color: black;
	}
	
	
	
/*set the Middle*/
.Middle{
			margin:20px auto 0;
			width: 80%;
			height: 80px;
			line-height: 80px;
			box-shadow:5px 5px 5px 5px  black;
}
.midnav {
			height: 100%;
			width:100%;
			margin: 0 auto;
								
}

.midnav li{
			height: 100%;
			width: 33.3%;
			float: left;
			list-style: none;
			text-align: center;
								
		
}
.midnav a{
			font: 50px/80px bold ;
			font-family: "bradley hand itc";
			font-style: italic;
			text-decoration: none;
			padding: 0 10px;								
			color: black;
								
	}
.midnav li:hover{
			background-image: linear-gradient(130deg,silver,white);
	}



/*set the articleUL*/
.artOuter{
			width: 80%;
			height: 400px;
			margin: 25px auto;
			position: relative;
			
			
}
.articleOuter{
			width: 100%;
			height: 400px;
			padding-top: 50px;
			border-radius: 20px;
			
								
}
.AO{
			position: absolute;
			top: 0px;
			opacity: 1;
			transition: 2s;
			background-image: linear-gradient(150deg,darkgray,silver,white);
}
.AO1{
			position: absolute;
			top: 0px;
			background-image: url(../img/haden.png);
			background-size: cover;
			
			opacity: 1;
			transition: 2s;
}
.AO2{
			position: absolute;
			z-index: -10;
			top: 0px;
			background-image: url(../img/haden.png);
			background-size: cover;
			
			opacity: 0;
			transition:2s;

			font:40px bold;
			font-style: italic;
			
}
.AO2 span{
			/*display: inline-block;*/
			margin-left: 65%;
			/*background: red;*/
}
.articleOuter .pic{
			width: 300px;
			height: 300px;
			overflow: hidden;
			margin: 0 auto;
									
}									
.articleOuter .title{
			width: 300px;
			height: 100px;
			background-color: goldenrod;
			opacity: 0.7;
			display: none;
			transition: 1s;
			font: 25px bold georgia;
			text-align: center;
			margin: 0 auto;
}

.articleOuter .artD{
	     	float: left;
	     	/*margin: 0 40px;*/
	     	width: 33.3%;
	     	height: 100%;
	     						
	     				
	     			
}
.articleOuter .artD:hover img{
	    	transform: scale(1.2);
	    						
}

.articleOuter .artD:hover  .title{
	      	display:block;
}

.articleOuter  img{
	     	transition: 1s;
}



/*set the edit*/
.edit{
			width:80%;
			margin: 0 auto;		
			padding:50px 0;

}
.edit  textarea{
		     width: 96%;
		     height: 500px;
		     outline-style: none;
		     padding: 2%;
		     font: 20px bold black ;		        
		     border: none;
		     border-radius: 15px;
		     border: 3px solid #000000;	
			 background: url(../img/artpic2.jpg);
		     opacity: 0.6; 		    
		     box-shadow:5px 5px 5px 8px  black;
		     resize: none;
	     
}
.edit button{	
			outline: none;
		    width: 210px;
			height: 32px;
			margin:20px  auto;
			border: none;
		 	border-radius: 12px;
		 	background-image: url(../img/lb3.jpg);
		 	color: white;
		 	transition: .5s;
		 	font: 18px bold;
		 	
}
.edit button:hover{
			transform: scale(1.1);
			/*color:orangered;*/
			font:20px;
				
}
.edit button:focus{
	   
			background: goldenrod;
	
}

/*设置footer的样式*/
.footer{
			height: 173px;
			background:#333;
			padding: 18px;
}
.footer p{
			color: #999;
			font: 11px helvetica;
}
.footer .p-float{
			float: right;
	
}
